<template>
    <div style="padding: 8px 20px">
        <el-button v-hasPerm="['sys:dept:add']" :icon="CirclePlus" type="primary" @click="addShop(0)">新增门店</el-button>
    </div>
    <el-table :data="shopList" default-expand-all v-loading="loading" row-key="id" min-width="100%">
        <el-table-column label="门店名称" prop="name" align="center" width="160" fixed="left"></el-table-column>
        <el-table-column label="区域" prop="region" align="center" width="180"></el-table-column>
        <el-table-column label="地址" prop="address" align="center" width="200"></el-table-column>
        <el-table-column label="经度" prop="longitude"></el-table-column>
        <el-table-column label="纬度" prop="latitude"></el-table-column>
        <el-table-column label="状态" width="200">
            <template #default="scope">
                <el-tag v-if="scope.row.status == 0" type="warning">闭店</el-tag>
                <el-tag v-if="scope.row.status == 1" type="success">正常</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="备注" prop="remark" width="100"></el-table-column>
        <el-table-column fixed="right" align="right" label="操作" width="160">
            <template #default="scope">
                <el-button v-hasPerm="['sys:shop:add']" type="warning" link size="small"
                    @click.stop="editShop(scope.row)">
                    编辑
                </el-button>
                <el-button v-hasPerm="['sys:shop:delete']" type="danger" link size="small"
                    @click.stop="delShop(scope.row.id)">
                    删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-drawer v-model="dialog" title="新增或编辑门店" :before-close="handleClose" direction="rtl" class="demo-drawer">
        <el-form ref="shopFormRef" :model="shopForm" :rules="rules">
            <el-form-item label="门店名称">
                <el-input placeholder="门店名称" v-model="shopForm.name"></el-input>
            </el-form-item>
            <el-form-item label="行政区域">
                <el-cascader v-model="shopForm.region" v-bind:options="pcaTextArr" @change="onRegionChange" />
            </el-form-item>
            <el-form-item label="门店地址">
                <el-input placeholder="街道门牌号" v-model="shopForm.address"></el-input>
            </el-form-item>
            <div class="row">
                <el-form-item label="经度">
                    <el-input placeholder="经度" v-model="shopForm.longitude" style="width: 80px;"></el-input>
                </el-form-item>
                <el-form-item label="纬度" style="margin-left: 20px;">
                    <el-input placeholder="纬度" v-model="shopForm.latitude" style="width: 80px;"></el-input>
                </el-form-item>
                <el-button @click="chooseArea" size="small" style="margin-bottom: 12px" type="success">地图选点</el-button>
            </div>
            <el-form-item label="状态" v-hasPerm="['sys:shop:close']">
                <el-radio-group v-model="shopForm.status">
                    <el-radio value="0">闭店</el-radio>
                    <el-radio value="1">正常</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item>
                <el-input placeholder="备注" v-model="shopForm.remark"></el-input>
            </el-form-item>

            <el-button type="primary" round style="width: 100%" @click="submit">确定</el-button>

        </el-form>
    </el-drawer>

</template>

<script setup>
import { pcaTextArr } from "element-china-area-data";
import { ElMessage } from 'element-plus';

import ShopApi from '@/api/shop';


let loading = ref(true)
let shopList = ref([])
let dialog = ref(false)

const initForm = {
    id: 0,
    name: "",
    region: [],
    address: "",
    longitude: "",
    latitude: "",
    gmUserId: 0,
    callNum: "",
    status: "1",
    remark: ""
}

let shopForm = ref(initForm)
let shopFormRef = ref()
let area = ref()

const rules = reactive({
    name: [{ required: true, message: "请输入门店名称", trigger: "blur" }],
    region: [{ required: true, message: "请选择行政区域", trigger: "blur" }],
    longitude: [{ required: true, message: "请输入经度", trigger: "blur" }],
    lantitude: [{ required: true, message: "请输入纬度", trigger: "blur" }]
});

onMounted(() => {
    loadShopList(1, 20)
})

let currentPage = 1
let totalPage = 1
let total = 0
function loadShopList(page, size) {
    ShopApi.list(page, size).then(res => {
        currentPage = res.currentPage
        totalPage = res.totalPage
        total = res.total
        shopList.value = res.list
        loading.value = false
    })
}

function submit() {
    shopFormRef.value.validate((ok) => {
        if (ok) {
            shopForm.value.region = shopForm.value.region.toString()
            ShopApi.addOrUpdate(shopForm.value).then(res => {
                if (res) {
                    dialog.value = false
                    ElMessage({
                        message: '添加或更新门店成功',
                        type: 'success',
                    })
                    loadAllDept()
                }
            }).catch(err => {
                ElMessage({
                    message: '添加或更新门店失败',
                    type: 'success',
                })
            })
        }
    })
}

function handleClose() {
    dialog.value = false
    shopForm.value = initForm
}

function addShop(id) {
    dialog.value = true
}

function editShop(item){
    shopForm.value = item
    dialog.value = true
}

function onRegionChange() {
    console.log(area.value)

}

function chooseArea(){
    window.open("https://www.lddgo.net/convert/position")
}

</script>

<style>
.row {
    display: flex;
    flex-direction: row;
    align-items: center;
}
</style>